<script setup>
import {useRouter} from 'vue-router'
import {CATEGORY_PRODUCT_LIST_ROUTE} from "@/router/routes/category/CategoryProductList.js";

const router = useRouter()

const props = defineProps({
  categoryId: {type: Number, default: 0},
  categoryName: {type: String, default: ''},
  categoryList: {type: Array, default: []}
})

const goCategoryProductList = (idx) => {
  router.push({
    name: CATEGORY_PRODUCT_LIST_ROUTE,
    query: {
      categoryId: props.categoryId,
      categorySubId: props.categoryList[idx].id,
      categoryName: props.categoryName,
      categorySubName: props.categoryList[idx].name,
    }
  })
}
</script>

<template>
  <div class="category-list">
    <div
        class="pt-2 pb-1 bg-white dark:bg-neutral-950 rounded-lg flex flex-col justify-start items-center"
        v-for="(cate, idx) in categoryList"
        @click="goCategoryProductList(idx)"
    >
      <div class="img-box">
        <img class="w-full h-full object-contain" :src="cate?.img" alt="商品分类图片">
      </div>
      <div class="mt-2 text-xs">
        <el-text class="w-20 dark:text-gray-100" truncated>
          <div class="flex-center">{{ cate?.name }}</div>
        </el-text>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.category-list {
  display: grid;
  // 列数自动填充，列宽最小为 7rem，最大占1份平均grid容器宽度
  grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
  grid-auto-flow: row; // 容器元素按顺序自动放置，默认先行后列
  column-gap: 1rem; // 列间距
  row-gap: 1rem; // 行间距
  justify-items: center; // 单元格内元素水平位置
  align-items: center; // 单元格内元素垂直位置

  .img-box {
    width: 3.8rem;
    height: 3.8rem;
  }
}
</style>